<template>
    <div class="factory-chat">
        <div class="f-header">
            <div class="prize-box">
                <prize :data="awardData.current"></prize>
            </div>
            <div class="current-box">
                <current
                        :info="userRoomInfoData"
                        :data="awardData.next"
                        @getAwardDataEvent="getAwardData"
                        @allowEvent="allowEvent"></current>
            </div>
        </div>
        <div class="f-body">
            <div class="chat-body" ref="chat">
                <!--<div class="alert">
                    <div class="info">
                        <span class="name master">
                            &#xe63c;
                            房主
                        </span>
                        <span class="time">2018-12-12 12:12</span>
                    </div>
                    <div class="content">
                        <span class="up">&#xe613;</span>
                        对话内容对话内容对话内容对话内容对话内容对话内容对话内容对话内容对话内容
                    </div>
                </div>
                <div class="system">
                    &#xe64c; 系统消息: 欢迎"砖石忘捞物"回来.
                </div>
                <div class="alert">
                    <div class="info">
                        <span class="name">张三</span>
                        <span class="time">2018-12-12 12:12</span>
                    </div>
                    <div class="content">
                        <span class="up">&#xe613;</span>
                        对话内容对话内容对话内容对话内容对话内容对话内容对话内容对话内容对话内容
                    </div>
                </div>-->
            </div>
        </div>
        <div class="f-footer">
            <push
                    @msgEvent="send"
                    :odds="odds"
                    :defaultOdds="defaultOdds"
                    :allow="allow"
                    @goldEvent="goldChange"
                    :userRoomInfo="userRoomInfoData"
                    :awardData="awardData"
                    :sendLoading="sendLoading"
                    :betss="betss"
                    :users="users"></push>
        </div>
    </div>
</template>

<script>
    import Prize from '../../../components/lottery/prize'
    import Current from '../../../components/lottery/current'
    import Push from '../../../components/lottery/push'
    import beforeRouteEnter from './beforeRouteEnter'
    import methods from './methods'
    import mounted from './mounted'
    export default {
        name: "index",
        data(){
            return {
                odds: {
                    1: [],
                    2: [],
                    3: [],
                    4: [],
                    5: [],
                    6: [],
                    7: [],
                    8: [],
                    9: [],
                    10: [],
                    'and': []
                },
                defaultOdds: 0,
                awardData: {},
                allow: true,
                userRoomInfoData: {},
                betss: {},
                sendLoading: false,
                ws: null,
                users: [],
                lockReconnect: false,
                tt: null,
                connectWebsocket: false
            }
        },
        components: {
            Prize,
            Current,
            Push
        },
        beforeRouteEnter,
        methods,
        mounted,
        //离开当前页面后执行
        destroyed () {
            this.ws.onclose()
        },
    }
</script>

<style scoped lang="less">
    @import "../../../assets/css/bases";
    .factory-chat {
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
        height: 100%;
        .f-header {
            .prize-box {
                padding: 10px 5px;
            }
        }
        .f-body{
            flex: 1;
            //background: #72a3ec;
            background: white;
            position: relative;
            .chat-body{
                height: 100%;
                width: 100%;
                overflow-y: auto;
                overflow-x: hidden;
                position: absolute;
                top: 0;
                left: 0;
                .system {
                    padding: @middle;
                    //color: #dbff0c;
                    color: @error;
                }
                .alert{
                    padding: @middle;
                    .info {
                        display: flex;
                        justify-content: flex-start;
                        align-items: baseline;
                        color: white;
                        .name {
                            margin-right: 10px;
                        }
                        .name.master{
                            color: @error;
                        }
                        .time{
                            font-size: @middle;
                            color: @gray;
                        }
                    }
                    .content {
                        background: white;
                        border-radius: 5px;
                        text-align: left;
                        padding: 10px;
                        margin-top: 5px;
                        font-size: .85rem;
                        line-height: @lager;
                        position: relative;
                        .up{
                            position: absolute;
                            left: 10px;
                            top: -8px;
                            width: 15px;
                            height: 15px;
                            line-height: 15px;
                            color: white;
                        }
                    }
                }
            }
        }
        .f-footer{
            height: 45px;
            background: #FF8D24;
            border-top: @gray solid 1px;
        }
    }
</style>